import React from "react";
import { SearchProps } from "../types";

const SearchBar: React.FC<SearchProps> = ({
  onSearch,
  onClear,
  results,
  isSearching,
  currentIndex,
  onPrevious,
  onNext
}) => {
  const [query, setQuery] = React.useState("");

  const handleSearch = () => {
    onSearch(query);
  };

  const handleClear = () => {
    setQuery("");
    onClear();
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSearch();
    }
  };

  return (
    <div className="search-container">
      <div className="search-bar">
        <input
          type="text"
          placeholder="输入关键词搜索..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyPress={handleKeyPress}
          className="search-input"
        />
        <button onClick={handleSearch} className="search-button">
          搜索
        </button>
        {query && (
          <button onClick={handleClear} className="clear-button">
            清除
          </button>
        )}
      </div>
      
      {isSearching && results.length > 0 && (
        <div className="search-navigation">
          <div className="search-info">
            找到 {results.length} 个匹配结果，当前第 {currentIndex + 1} 个
          </div>
          <div className="navigation-buttons">
            <button 
              onClick={onPrevious} 
              disabled={currentIndex <= 0}
              className="nav-button"
            >
              ← 上一个
            </button>
            <button 
              onClick={onNext} 
              disabled={currentIndex >= results.length - 1}
              className="nav-button"
            >
              下一个 →
            </button>
          </div>
        </div>
      )}

      {isSearching && results.length === 0 && (
        <div className="no-results">
          未找到匹配的内容
        </div>
      )}
    </div>
  );
};

export default SearchBar;
